<template>
  <div class="goods">
    <div class="topBar">
      <van-icon class="i_left" name="arrow-left" @click="$router.back()" />
      <span>地址管理</span>
    </div>
    <div class="myForm">
      <van-form>
        <div class="formBox">
          <van-field
            v-model="info.name"
            name="收货人"
            label="收货人"
            placeholder="请输入收货人"
            input-align="left"
          />
          <van-field
            v-model="info.phone"
            name="联系方式"
            label="联系方式"
            placeholder="请输入手机号"
            input-align="left"
          />
          <van-field readonly clickable name="area" v-model="fieldValue" label="地区选择" placeholder="点击选择省市区"
              input-align="right" right-icon="arrow" @click="showArea = true"></van-field>
          <van-field
            v-model="info.address"
            name="详细地址"
            type="textarea"
            rows="3"
            placeholder="请输入详细地址"
            input-align="left"
          />
        </div>
        <div style="margin: 60px 16px 16px 16px">
          <van-button color="#389EFF" round block type="info" @click="save">提交</van-button>
        </div>
      </van-form>
    </div>
    <van-popup v-model="showArea" round position="bottom">
      <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          @close="showArea = false"
          @finish="onFinish"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      info: {},
      showArea: false,
      areaList: {}, // 数据格式见 Area 组件文档
      fieldValue: '',
      cascaderValue: '',
      options: [],
    };
  },
  created() {
    this.getAddress()
    this.getOptions()
  },
  methods: {
    onFinish({ selectedOptions }) {
      this.showArea = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    getOptions() {
      this.sendReq('home/getCityTree', {}, r => {
        this.options = r
      })
    },
    getAddress() {
      this.sendReq('address/mine', {}, r => {
        r = r ? r : {province: '', city: '', district: ''}
        this.info = r
        this.fieldValue = r.province ? `${r.province}/${r.city}/${r.district}` : ''
        this.cascaderValue = r.district
      })
    },
    save() {
      const arr = this.fieldValue.split('/')
      this.info.province = arr[0] || ''
      this.info.city = arr[1] || ''
      this.info.district = arr[2] || ''

      this.sendReq('address/save', this.info, r => {
        this.alert('保存成功')
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      })
    },
  }
};
</script>

<style lang="less" scoped>
.goods {
  padding: 42px 0 0 0;
}
.myForm {
  .van-field__label{
    font-size:15px;
    color:#000;
  }
  .van-cell {
    padding: 20px 15px;
  }
  .formBox {
    border-radius: 5px;
  }
  .formBox .van-cell:first-child {
    border-radius: 5px 5px 0 0;
  }
  .formBox .van-cell:last-child {
    border-radius: 0 0 5px 5px;
  }
  .van-cell::after {
    border-bottom: 1px solid #e1e1e1;
  }
}
.van-field__right-icon {
  color: #c8c8c8 !important;
}
</style>
